import React, { useState, useEffect } from 'react';
import { Card, InputNumber, Button, message, Spin } from 'antd';
import { API_BASE_URL } from './config'; // We'll create this config file

const Admin = () => {
    const [editorCount, setEditorCount] = useState(1);
    const [isLoading, setIsLoading] = useState(true);

    useEffect(() => {
        const fetchConfig = async () => {
            try {
                const response = await fetch(`${API_BASE_URL}/api/config`);
                const result = await response.json();
                if (result.success) {
                    setEditorCount(result.config.editorCount);
                } else {
                    message.error('获取配置失败');
                }
            } catch (error) {
                message.error('无法连接到服务器');
            } finally {
                setIsLoading(false);
            }
        };
        fetchConfig();
    }, []);

    const handleSave = async () => {
        try {
            const response = await fetch(`${API_BASE_URL}/api/config`, {
                method: 'POST',
                headers: { 'Content-Type': 'application/json' },
                body: JSON.stringify({ editorCount })
            });
            const result = await response.json();
            if (result.success) {
                message.success('配置已更新！');
            } else {
                message.error(result.message || '更新失败');
            }
        } catch (error) {
            message.error('无法保存配置');
        }
    };

    if (isLoading) {
        return <Spin tip="加载配置中..." />;
    }

    return (
        <div style={{ padding: '50px' }}>
            <Card title="编辑器配置">
                <p>设置需要分配任务的在线编辑用户数量。</p>
                <InputNumber 
                    min={1} 
                    value={editorCount} 
                    onChange={setEditorCount} 
                    style={{ marginRight: '16px' }} 
                />
                <Button type="primary" onClick={handleSave}>
                    保存设置
                </Button>
            </Card>
        </div>
    );
};

export default Admin; 